<template>
  <div class="statistical-2 statistical">
    <div class="col blur">
      <BlockItem style="height: 40%" class="block-item" title="各县市项目数量" :sub-title="'截止至：'+now" type="1">
        <div class="chart" id="chart1"></div>
      </BlockItem>
      <BlockItem style="height: 35%" class="block-item" title="各县市项目扶持资金雷达" type="1">
        <div class="chart" id="chart2"></div>
      </BlockItem>
      <BlockItem style="height: 25%" class="block-item" :title="(new Date().getFullYear()-1)+'年度省级人才项目入选情况统计表'" type="1">
        <div class="talent-project" v-loading="loading.talentProject" element-loading-background="rgba(0, 0, 0, 0.4)">
          <template v-if="talentProject.length>0">
            <div class="talent-project-item" v-for="(item,index) in talentProject" :key="index">
              <div class="info">
                <div class="number" :class="'number-'+(index+1)">{{index+1}}</div>
                <div class="title">{{item.name}}</div>
                <div class="count">{{item.amount}}</div>
                <div class="unit">万元</div>
              </div>
              <Progress :percentage="item.percentage"></Progress>
            </div>
          </template>
          <div style="text-align: center;color: #fff" v-else>暂无数据</div>
        </div>
      </BlockItem>
    </div>
    <div class="col full">
      <BlockItem style="height: 65%" class="block-item">
        <div class="number-block">
          <NumberItem v-loading="loading.number" element-loading-background="rgba(0, 0, 0, 0.4)" class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon"></NumberItem>
        </div>
        <Map class="global-map"></Map>
      </BlockItem>
      <BlockItem style="height: 35%"  class="block-item blur">
        <div class="chart" id="chart3"></div>
      </BlockItem>
    </div>
    <div class="col blur">
      <BlockItem style="height: 30%"  class="block-item" title="人才引进" type="1">
        <div class="talent-introduce" v-loading="loading.talentIntroduce" element-loading-background="rgba(0, 0, 0, 0.4)" >
          <div class="talent-info">
            <div class="text">2019-{{ new Date().getFullYear() }}年人才引进</div>
            <div class="text">人才总量<span style="vertical-align: sub" class="number">{{ talentIntroduce.total }}</span>人</div>
            <div class="talent-title">各年汇总</div>
            <div class="year">
              <div class="year-item" v-for="(item,index) in talentIntroduce.year" :key="index">
                <div class="year-text">{{ item.year }}年</div>
                <div class="number">{{ item.value }}<div class="unit">人</div></div>
              </div>
            </div>
          </div>
          <div class="talent-chart">
            <div class="talent-title">所属区县</div>
            <div class="chart" id="chart4"></div>
          </div>
        </div>
      </BlockItem>
      <BlockItem style="height: 35%"  class="block-item" title="市级重点人才项目" type="2">
        <div class="chart" id="chart5"></div>
      </BlockItem>
      <BlockItem style="height: 35%"  class="block-item" title="人才实训基地" type="3">
        <div class="chart" id="chart6"></div>
      </BlockItem>
    </div>
  </div>
</template>

<script>
import {getArrByKey, getSymbolData} from "@/utils/chart";
import {getCurrentTime, getRandomNum} from "@/utils/utils";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import Progress from "@/components/Progress/Progress.vue";
import {
  getProjectBar,
  getProjectInfoRadar,
  talentProject,
  talentIntroduce,
  talentProjectChart, talentBaseChart
} from "@/api/statistical2";
import {getTotalCount} from "@/api/statistical1";
import NumberItem from "@/components/NumberItem/NumberItem.vue";
import Map from "@/components/Map.vue";

export default {
  name: "Statistical2",
  components: {Map, NumberItem, BlockItem,Progress},
  data() {
    return {
      now:'',
      charts: {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null,
        chart5: null,
        chart6: null,
      },
      numberData: [
        {
          id: 1,
          unit: '万人',
          color: ['#5c6affb3', '#4a29d8b3'],
          name: '人才总量',
          icon: 'icon-rencaifuwu',
          number: 0
        },
        {
          id: 2,
          unit: '%',
          color: ['#30cbf7b3', '#1997e1b3'],
          name: '各类人才占人口比例',
          icon: 'icon-fenlei',
          number: 0
        },
        {
          id: 3,
          unit: '万元',
          color: ['#12f1b8b3', '#0db5e6b3'],
          name: '人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
        {
          id: 4,
          unit: '万元',
          color: ['#f7c759b3', '#fb838fb3'],
          name: '市本级人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
      ],
      loading:{
        talentProject:false,
        number:false,
        talentIntroduce:false
      },
      talentProject:[],
      talentIntroduce:{
        total:0,
        chart:[],
        year:[],
      },
    }
  },
  methods: {
    totalCount(){
      this.loading.number=true
      getTotalCount().then(data=>{
        this.numberData[0].number=data.total.value
        this.numberData[1].number=data.talent_proportion.value
        this.numberData[2].number=data.money.value
        this.numberData[3].number=data.city_money.value
      }).finally(()=>{
        this.loading.number=false
      })
    },
    async initProject() {
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.charts.chart1.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getProjectBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.06;//偏移量
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>个</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：个',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(73,73,25,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolPosition: "end",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#6c6c34',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#bc4405"
                    },
                      {
                        offset: 1,
                        color: "#c6aa2c"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option)
    },
    async initProjectFunding() {
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.charts.chart2.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await getProjectInfoRadar();
      let project = data.project;
      let money = data.money;
      let area=data.area;
      let maxValue = Math.max.apply(null, [...project, ...money]);
      maxValue = maxValue + maxValue * 0.1;
      let option = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'item',
        },
        legend: {
          show: true,
          right: '10%',
          top: 'center',
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        radar: {
          center: ['30%', '55%'],
          radius: '50%',
          indicator:area.map((item)=>{
            return {name:item,max:maxValue}
          }),
        },
        color: ['#24cffd', '#9632ed'],
        series: [
          {
            areaStyle: {},
            type: 'radar',
            symbol: 'none',
            data: [
              {
                value: project,
                name: '项目数量'
              },
              {
                value: money,
                name: '扶持资金'
              }
            ]
          }
        ]
      }
      this.charts.chart2.hideLoading();
      this.charts.chart2.setOption(option)
    },
    getTalentProject(){
      this.loading.talentProject=true
      talentProject({year:new Date().getFullYear()-1}).then(res=>{
        this.talentProject=res;
      }).finally(()=>{
        this.loading.talentProject=false;
      })
    },
    initProjectTendency() {//未调用数据接口
      this.charts.chart3 = this.$echarts.init(document.getElementById('chart3'));
      this.charts.chart3.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

      let option = {
        title: {
          text: '各县市重点项目扶持资金趋势',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        legend: {
          show: true,
          left: 'center',
          top: '45',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: month,
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 14}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'value',
          name: '单位：万元',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            showSymbol: false,
            name: '肃州区',
            data: getRandomNum(12, 1000, 800),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '玉门市',
            data: getRandomNum(12, 900, 700),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '瓜州县',
            data: getRandomNum(12, 900, 700),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '金塔县',
            data: getRandomNum(12, 800, 600),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '敦煌市',
            data: getRandomNum(12, 700, 500),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '肃北县',
            data: getRandomNum(12, 500, 300),
            type: 'line'
          },
          {
            showSymbol: false,
            name: '阿克塞县',
            data: getRandomNum(12, 500, 300),
            type: 'line'
          },
        ]
      }
      this.charts.chart3.hideLoading();
      this.charts.chart3.setOption(option)
    },
    initTalentIntroduce(){
      this.loading.talentIntroduce=true;
      talentIntroduce().then(res=>{
        this.talentIntroduce=res;
        this.initTalentIntroduceChart()
      }).finally(()=>{
        this.loading.talentIntroduce=false;
      })
    },
    initTalentIntroduceChart(){
      this.charts.chart4 = this.$echarts.init(document.getElementById('chart4'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '2%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type:"value",
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: false, textStyle: {color: '#fff', fontSize: 12}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type:'category',
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(this.talentIntroduce.chart, 'name'),
        },
        series: [
          {
            name:'人数',
            type:'bar',
            barWidth:6,
            data:getArrByKey(this.talentIntroduce.chart, 'value'),
            itemStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[{
                offset:0,
                color:'#1ddcf0'
              },{
                offset:1,
                color:'#4d65c9'
              }])
            }
          }
        ]
      }
      this.charts.chart4.hideLoading();
      this.charts.chart4.setOption(option)
    },
    async initTalentProjectChart(){
      this.charts.chart5 = this.$echarts.init(document.getElementById('chart5'));
      this.charts.chart5.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await talentProjectChart();
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '2%',
          bottom: '2%',
          top: '60',
          containLabel: true
        },
        legend:{
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          type:'category',
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 12},
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'year'),
        },
        yAxis: [{
          type:"value",
          name:'数量',
          nameTextStyle:{
            color:'#fff'
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },{
          type:"value",
          name:'资金',
          nameTextStyle:{
            color:'#fff'
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        }],
        series: [
          {
            name:'数量',
            type:'bar',
            barWidth:10,
            data:getArrByKey(data, 'count'),
            itemStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'#1098ff'
              },{
                offset:1,
                color:'rgba(16,152,255,0.5)'
              }])
            }
          },{
            name:'资金',
            type:'line',
            color:'rgba(255,255,255,0.5)',
            yAxisIndex:1,
            data:getArrByKey(data, 'amount'),
          }
        ]
      }
      this.charts.chart5.hideLoading();
      this.charts.chart5.setOption(option)
    },
    async initTalentBaseChart(){
      this.charts.chart6 = this.$echarts.init(document.getElementById('chart6'));
      this.charts.chart6.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await talentBaseChart();
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '2%',
          bottom: '2%',
          top: '60',
          containLabel: true
        },
        legend:{
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          type:'category',
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 12},
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'year'),
        },
        yAxis: [{
          type:"value",
          name:'数量',
          nameTextStyle:{
            color:'#fff'
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },{
          type:"value",
          name:'资金',
          nameTextStyle:{
            color:'#fff'
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',fontSize:10}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        }],
        series: [
          {
            name:'数量',
            type:'bar',
            barWidth:10,
            data:getArrByKey(data, 'count'),
            itemStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'#f38220'
              },{
                offset:1,
                color:'rgba(243,130,32,0.5)'
              }])
            }
          },{
            name:'资金',
            type:'line',
            yAxisIndex:1,
            color:'rgba(255,255,255,0.5)',
            data:getArrByKey(data, 'amount'),
          }
        ]
      }
      this.charts.chart6.hideLoading();
      this.charts.chart6.setOption(option)
    }
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    this.now=getCurrentTime('i');
    //各县市项目数量
    this.initProject();
    //各县市项目扶持资金雷达
    this.initProjectFunding();
    //年度省级人才项目入选情况
    this.getTalentProject();
    //顶部统计
    this.totalCount()
    //重点项目扶持资金趋势
    this.initProjectTendency();
    //人才引进
    this.initTalentIntroduce()
    //市级重点人才项目
    this.initTalentProjectChart()
    //人才实训基地
    this.initTalentBaseChart()
    this.$bus.$on('resize', () => {
      this.$bus.$on('resize', () => {
        Object.keys(this.charts).forEach((key) => {
          this.charts[key] && this.charts[key].resize()
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-2 {
  width: 100%;
  height: 100%;
  .talent-project{
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
    .talent-project-item{
      width: 100%;
      height: calc(100%/2 - 8px);
      padding: 5px 12px;
      border: 1px solid #3a4855;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .info{
        width: 100%;
        display: flex;
        align-items: center;
        .number{
          width: 30px;
          height: 18px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          font-size: 14px;
        }
        .number-1{
          border: 1px solid #83690f;
          box-shadow: inset 0 0 20px 0 rgba(131, 105, 15 , 50%);
        }
        .number-2{
          border: 1px solid #7e3f21;
          box-shadow: inset 0 0 20px 0 rgba(126, 63, 33, 0.50);
        }
        .number-3{
          border: 1px solid #479e9d;
          box-shadow: inset 0 0 20px 0 rgba(71, 158, 157, 0.5);
        }
        .title{
          color: #fff;
          font-size: 14px;
          width: calc(100% - 130px);
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .count{
          color: #fff;
          width: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
        }
        .unit{
          color: #98b8d3;
          font-size: 14px;
        }
      }
    }
  }
  .talent-introduce{
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    .talent-info{
      width: 50%;
      height: 100%;
      .text{
        font-size: 17px;
        color:#fff;
        font-weight: bold;
        .number{
          font-size: 36px;
          color: #5cd7bb;
        }
      }
      .talent-title{
        border-left: 2px solid #1ea6f6;
        color: #fff;
        padding-left: 10px;
        margin-top: 5px;
      }
      .year{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        .year-item{
          width: calc(100%/3 - 5px);
          height: 65px;
          border-radius: 5px;
          border: 1px solid #47515a;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          background: #0f1a1f;
          .year-text{
            color: #fff;
            font-size: 14px;
            margin-bottom: 5px;
          }
          .number{
            color: #5dd9bd;
            font-size: 17px;
            font-weight: bold;
            display: flex;
            align-items: center;
            .unit{
              font-size: 14px;
              color: #5dd9bd;
              font-weight: normal;
            }
          }
        }
      }
    }
    .talent-chart{
      width: 50%;
      height: 100%;
      .talent-title{
        height: 25px;
        border-left: 2px solid #1ea6f6;
        color: #fff;
        padding-left: 10px;
        display: flex;
        align-items: center;
      }
      #chart4{
        width: 100%;
        height: calc(100% - 25px);
      }
    }
  }
}
</style>
